<!--考评排名-->
<template>
<div>
	<el-row :gutter="20">
		<el-col :span="8">
			<div class="statistics-item">
				<h3 class="tc">总排名</h3>
				<div class="rank-title-box flex"><span class="w100">行政区划</span><span >分数</span><span class="w80">排名</span></div>
				<div class="rank-item flex" v-for="(item,index) in rankData" :key="index">
					<div class="w100">{{item.region}}</div>
					<el-progress :format="format" :text-inside="true" status="success" :stroke-width="16" :percentage="item.num" stroke-linecap="square" class="progress"></el-progress>
					<div class="w80">
						<el-tag effect="dark" class="rank">{{index+1}}</el-tag>
					</div>
				</div>
			</div>
		</el-col>
		<el-col :span="8"><div class="statistics-item" id="chart"></div></el-col>
		<el-col :span="8"><div class="statistics-item" id="chart1"></div></el-col>
	</el-row>
	<el-row :gutter="20" class="mt20">
		<el-col :span="8"><div class="statistics-item">1</div></el-col>
		<el-col :span="8"><div class="statistics-item" id="chart2"></div></el-col>
		<el-col :span="8"><div class="statistics-item" id="chart3"></div></el-col>
	</el-row>
</div>
</template>

<script>
import DomSize from '@/utils/domSize'
export default {
	data() {
		return {
			rankData:[
				{region:'孝南区',num:100},
				{region:'孝昌县',num:98},
				{region:'安陆市',num:96},
				{region:'应城市',num:95},
				{region:'云梦县',num:92},
				{region:'大悟县',num:86},
				{region:'汉川市',num:82}
			],
			chart:{},
			chart1:{},
			chart2:{},
			chart3:{},
		};
	},
	created() {},
	mounted(){
		this.setChart('chart','巡查任务完成率');
		this.setChart('chart1','事件处理率');
		this.setChart('chart2','督办评价统计');
		this.setChart('chart3','信访评价统计');

		document.getElementsByClassName('statistics-item').forEach(element => {
			if(element.id){
				DomSize.bind(document.getElementById(element.id), ()=>{
					this[element.id].resize()
				})
			}
		})
	},
	methods: {
		format(percentage) {
			return percentage;
		},
		setChart(elem,title){
			this[elem] = this.$echarts.init(document.getElementById(elem));
			var option = {
				title: {
					text: title,
					left: '50%',
					top: '20',
					textAlign: 'center'
				},
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {            // 坐标轴指示器，坐标轴触发有效
						type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['孝南区', '孝昌县', '安陆市', '应城市', '云梦县', '大悟县', '汉川市'],
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: title,
						label: {
							show: true,
							position: 'inside'
						},
						type: 'bar',
						barWidth: '60%',
						data: [96, 90, 75, 70, 85, 93, 95]
					}
				]
			};
			this[elem].setOption(option);
		},
	},
};
</script>

<style lang="scss" scoped>
.statistics-item{
	min-height: 400px;
	background: #fff;
	border: 1px solid #fff;
}
.rank-title-box{
	padding: 10px 0;
	// border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
	span{
		text-align: center;
		font-weight: bold;
		&:nth-child(2){
			flex: 1;
		}
	}
	
}
.rank-item{
	text-align: center;
	padding: 5px 0;
	border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
	font-size: 14px;
	.progress{
		flex: 1;
	}
}
.w100{
	width: 100px;
}
.w80{
	width: 80px;
}
</style>
<style lang="scss">
.rank-item{
	.el-progress-bar__outer{
		border-radius: 0;
	}
	.el-progress.is-success .el-progress-bar__inner{
		text-align: center;
		border-radius: 0;
	}
}
</style>